{% extends 'xBlog_admin/admin_base.html' %}
{% load xBlog_filter %}
{% block content %}
    <div class="graphs">
        <div class="col_3">
            <div class="col-md-3 widget widget1">
                <div class="r3_counter_box">
                    <i class="pull-left fa fa-thumbs-up icon-rounded"></i>
                    <div class="stats">
                        <h5><strong>{{ retention_rate }}</strong></h5>
                        <span>Retention Rate</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 widget widget1">
                <div class="r3_counter_box">
                    <i class="pull-left fa fa-users user1 icon-rounded"></i>
                    <div class="stats">
                        <h5><strong>{{ uv_num }}</strong></h5>
                        <span>Total User Views</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 widget widget1">
                <div class="r3_counter_box">
                    <i class="pull-left fa fa-eye user2 icon-rounded"></i>
                    <div class="stats">
                        <h5><strong>{{ pv_num }}</strong></h5>
                        <span>Total Page Views</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 widget">
                <div class="r3_counter_box">
                    <i class="pull-left fa fa-comment dollar1 icon-rounded"></i>
                    <div class="stats">
                        <h5><strong>{{ comment_num }}</strong></h5>
                        <span>Total Comments</span>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="col_1">
            <div class="col-md-4 span_7">
                <div class="cal1 cal_2">
                    <div class="clndr">
                        <div class="clndr-controls">
                            <div class="clndr-control-button"><p class="clndr-previous-button">previous</p></div>
                            <div class="month">July 2015</div>
                            <div class="clndr-control-button rightalign"><p class="clndr-next-button">next</p></div>
                        </div>
                        <table class="clndr-table" border="0" cellspacing="0" cellpadding="0">
                            <thead>
                            <tr class="header-days">
                                <td class="header-day">S</td>
                                <td class="header-day">M</td>
                                <td class="header-day">T</td>
                                <td class="header-day">W</td>
                                <td class="header-day">T</td>
                                <td class="header-day">F</td>
                                <td class="header-day">S</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="day adjacent-month last-month calendar-day-2015-06-28">
                                    <div class="day-contents">28</div>
                                </td>
                                <td class="day adjacent-month last-month calendar-day-2015-06-29">
                                    <div class="day-contents">29</div>
                                </td>
                                <td class="day adjacent-month last-month calendar-day-2015-06-30">
                                    <div class="day-contents">30</div>
                                </td>
                                <td class="day calendar-day-2015-07-01">
                                    <div class="day-contents">1</div>
                                </td>
                                <td class="day calendar-day-2015-07-02">
                                    <div class="day-contents">2</div>
                                </td>
                                <td class="day calendar-day-2015-07-03">
                                    <div class="day-contents">3</div>
                                </td>
                                <td class="day calendar-day-2015-07-04">
                                    <div class="day-contents">4</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="day calendar-day-2015-07-05">
                                    <div class="day-contents">5</div>
                                </td>
                                <td class="day calendar-day-2015-07-06">
                                    <div class="day-contents">6</div>
                                </td>
                                <td class="day calendar-day-2015-07-07">
                                    <div class="day-contents">7</div>
                                </td>
                                <td class="day calendar-day-2015-07-08">
                                    <div class="day-contents">8</div>
                                </td>
                                <td class="day calendar-day-2015-07-09">
                                    <div class="day-contents">9</div>
                                </td>
                                <td class="day calendar-day-2015-07-10">
                                    <div class="day-contents">10</div>
                                </td>
                                <td class="day calendar-day-2015-07-11">
                                    <div class="day-contents">11</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="day calendar-day-2015-07-12">
                                    <div class="day-contents">12</div>
                                </td>
                                <td class="day calendar-day-2015-07-13">
                                    <div class="day-contents">13</div>
                                </td>
                                <td class="day calendar-day-2015-07-14">
                                    <div class="day-contents">14</div>
                                </td>
                                <td class="day calendar-day-2015-07-15">
                                    <div class="day-contents">15</div>
                                </td>
                                <td class="day calendar-day-2015-07-16">
                                    <div class="day-contents">16</div>
                                </td>
                                <td class="day calendar-day-2015-07-17">
                                    <div class="day-contents">17</div>
                                </td>
                                <td class="day calendar-day-2015-07-18">
                                    <div class="day-contents">18</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="day calendar-day-2015-07-19">
                                    <div class="day-contents">19</div>
                                </td>
                                <td class="day calendar-day-2015-07-20">
                                    <div class="day-contents">20</div>
                                </td>
                                <td class="day calendar-day-2015-07-21">
                                    <div class="day-contents">21</div>
                                </td>
                                <td class="day calendar-day-2015-07-22">
                                    <div class="day-contents">22</div>
                                </td>
                                <td class="day calendar-day-2015-07-23">
                                    <div class="day-contents">23</div>
                                </td>
                                <td class="day calendar-day-2015-07-24">
                                    <div class="day-contents">24</div>
                                </td>
                                <td class="day calendar-day-2015-07-25">
                                    <div class="day-contents">25</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="day calendar-day-2015-07-26">
                                    <div class="day-contents">26</div>
                                </td>
                                <td class="day calendar-day-2015-07-27">
                                    <div class="day-contents">27</div>
                                </td>
                                <td class="day calendar-day-2015-07-28">
                                    <div class="day-contents">28</div>
                                </td>
                                <td class="day calendar-day-2015-07-29">
                                    <div class="day-contents">29</div>
                                </td>
                                <td class="day calendar-day-2015-07-30">
                                    <div class="day-contents">30</div>
                                </td>
                                <td class="day calendar-day-2015-07-31">
                                    <div class="day-contents">31</div>
                                </td>
                                <td class="day adjacent-month next-month calendar-day-2015-08-01">
                                    <div class="day-contents">1</div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-4 span_8" style="height: 392px;">
                <div class="activity_box">
                    <div class="scrollbar" id="style-2">
                        {% for comment in latest_comments %}
                            <div class="activity-row">
                                <div class="col-xs-1"><i class="fa fa-comment text-info"> </i></div>
                                <div class="col-xs-3 activity-img"><img
                                        src="/static/xBlog_admin/images/{{ head_list|random }}"
                                        class="img-responsive"
                                        alt=""/></div>
                                <div class="col-xs-8 activity-desc">
                                    <h5>
                                        <a href="{% url 'detail' article_id=comment.article_id.id %}#{{ comment.comment_id }}">{{ comment.visitor|visitor_nickname }}</a>
                                        commented <a
                                            href="{% url 'detail' article_id=comment.article_id.id %}">{{ comment.article_id.title }}</a>
                                    </h5>
                                    <p>{{ comment.content|sub_content:20 }}</p>
                                    <h6>{{ comment.submit_time|date:"Y-m-d H:i" }}</h6>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-md-4 stats-info" style="height: 392px;">
                <div class="panel-heading">
                    <h4 class="panel-title">Browser Area Stats</h4>
                </div>
                <div class="panel-body">
                    <ul class="list-unstyled">
                        {% for data in browse_data %}
                            <li>{{ data.0 }}
                                <div class="text-success pull-right">{{ data.1|percentage:pv_num }}</div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="span_11">
            <div class="col-md-6 col_4">
                <div class="pie_container cantainer">
                    <canvas id="doughnut" height="400" width="468" style="width: 468px; height: 460px;"></canvas>
                    <script type="text/javascript">
                        var labels = [];
                        var data1 = [];
                        var data2 = [];
                        var backgroundColor = ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360", "#abf260", "#da7498", "#90a6a6", "#4e785f"];
                        {% for data in article_visit_data %}
                            labels.push('{{ data.0 }}');
                            data1.push({{ data.1 }});
                            data2.push({{ data.2 }})
                        {% endfor %}

                    </script>
                </div>
            </div>
            <div class="col-md-6 col_5" style="padding-right: 0px;">
                <div id="chart_container" class="cantainer">
                    <canvas id="line" height="400" width="483" style="width: 483px; height: 480px;"></canvas>
                </div>
            </div>
            <div class="clearfix"></div>
            <script type="text/javascript">
                var labels = [];
                var data1 = [], data2 = [];
                {% for data in browse_line_data %}
                    labels.push('{{ data.0 }}');
                    data1.push({{ data.1 }});
                    data2.push({{ data.2 }});
                {% endfor %}
                var lineConfig = {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: "Comments",
                            data: data2,
                            fill: true,
                            borderWidth: 1,
                            borderColor: '#3b5998',
                            backgroundColor: '#337ab7',
                            pointBorderColor: '#fff',
                            pointBackgroundColor: '#337ab7',
                        }, {
                            label: "Page Views",
                            data: data1,
                            fill: true,
                            borderWidth: 1,
                            borderColor: '#337ab7',
                            backgroundColor: '#00aced',
                            pointBorderColor: '#fff',
                            pointBackgroundColor: '#00aced',
                        }]
                    },
                    options: {
                        responsive: true,
                        title: {
                            display: false,
                        },
                        tooltips: {
                            mode: 'label'
                        },
                        hover: {
                            mode: 'dataset'
                        },
                        scales: {
                            xAxes: [{
                                display: true,
                                scaleLabel: {
                                    show: true,
                                    labelString: 'Month'
                                }
                            }],
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    show: true,
                                    labelString: 'Value'
                                },
                            }]
                        }
                    }
                };
                new Chart(document.getElementById("line").getContext("2d"), lineConfig);
                var doughnutConfig = {
                    'type': 'doughnut',
                    data: {
                        datasets: [{
                            data: data1,
                            backgroundColor: backgroundColor
                        },
                            {
                                data: data2,
                                backgroundColor: backgroundColor
                            }],
                        labels: labels
                    },
                    options: {
                        responsive: true
                    }
                };
                new Chart(document.getElementById("doughnut").getContext("2d"), doughnutConfig);
            </script>
        </div>
        <div class="content_bottom">
            <div class="col-md-8 span_3">
                <div class="bs-example1" data-example-id="contextual-table" style="height: 582px;">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Article</th>
                            <th>Visits</th>
                            <th>Comments</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for data in article_visit_data %}
                            <tr class="{{ forloop.counter|table_class }}">
                                <th scope="row">{{ forloop.counter }}</th>
                                <td>{{ data.0 }}</td>
                                <td>{{ data.1 }}</td>
                                <td>{{ data.2 }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-4 span_4">
                <div class="col_2">
                    <div class="box_1">
                        <div class="col-md-6 col_1_of_2 span_1_of_2">
                            <a class="tiles_info">
                                <div class="tiles-head red1">
                                    <div class="text-center">Site Foundation</div>
                                </div>
                                <div class="tiles-body red">{{ days_remind|get_day_delta:'建站' }}<strong>days</strong></div>
                            </a>
                        </div>
                        <div class="col-md-6 col_1_of_2 span_1_of_2">
                            <a class="tiles_info tiles_blue">
                                <div class="tiles-head tiles_blue1">
                                    <div class="text-center">M&D's S.W.</div>
                                </div>
                                <div class="tiles-body blue1">{{ days_remind|get_day_delta:'爸妈银婚' }}<strong>days</strong></div>
                            </a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="box_1">
                        <div class="col-md-6 col_1_of_2 span_1_of_2">
                            <a class="tiles_info">
                                <div class="tiles-head fb1">
                                    <div class="text-center">GF's Birthday</div>
                                </div>
                                <div class="tiles-body fb2">{{ days_remind|get_day_delta:'女盆友生日' }}<strong>days</strong></div>
                            </a>
                        </div>
                        <div class="col-md-6 col_1_of_2 span_1_of_2">
                            <a class="tiles_info tiles_blue">
                                <div class="tiles-head tw1">
                                    <div class="text-center">L&G's Memo</div>
                                </div>
                                <div class="tiles-body tw2">{{ days_remind|get_day_delta:'纪念日' }}<strong>days</strong></div>
                            </a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="cloud">
                    <div class="grid-date">
                        <div class="date">
                            <p class="date-in">{{ cur_city }}</p>
                            <span class="date-on">°C </span>
                            <div class="clearfix"></div>
                        </div>
                        <h4>{{ temperature }}° {{ condition }}</h4>
                    </div>
                    <p class="monday">{% now 'l d F' %}</p>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="copy">
            <p>Copyright &copy; 2016. All rights reserved. Powered by Python大鹌鹑.</p>
        </div>
    </div>
{% endblock %}